<template>
	<view class="container">
		<view class="count_down" @click="goto">关闭：{{seconds}}</view>
		<image src="../../static/ic_eshop.png" mode="" class="logo"></image>
		<image src="../../static/ic_title.png" mode="" class="title"></image>
		<text>购物总有新玩法</text>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	const seconds = ref(3);

	function goto() {
		uni.switchTab({
			url: '/pages/tabBar/index/index'
		})
	}

	// onMounted是vue3的生命周期函数，表示当页面加载成功后调用
	onMounted(() => {
		// 定时器
		const timer = setInterval(() => {
			seconds.value--
			if (seconds.value == 0) {
				// goto();
				clearInterval(timer);
				timer = null;
			}
		}, 1000)
		// 延时器
		// setTimeout(() => {
		// 	// uni.navigateTo({
		// 	// 	url: '/pages/index/index'
		// 	// })
		// }, 2000)
	})
</script>

<style lang="scss">
	.container {
		// vw，默认将宽分成100份
		width: 100vw;
		height: 100vh;
		background-color: #F2F4F5;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>.count_down {
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 80rpx;
			right: 20rpx;
		}

		// &表示父容器
		&>.logo {
			// vw，默认将宽分成100份
			width: 200rpx;
			height: 200rpx;
			margin-top: 25vh;
			margin-bottom: 25vh;
		}

		&>.title {
			width: 200rpx;
			height: 50rpx;
		}

		&>text {
			color: #ACAEB0;
			letter-spacing: 20rpx;
			margin-top: 20rpx;
			font-weight: 500;
		}
	}
</style>